{extend name="base"}
{block name="body"}
<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">商品管理</a></li>
  <li class="active">类型管理</li>
</ol>
<div class="panel panel-default">
  <div class="panel-heading">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加商品类型</button>
  </div>
  <table class="table table-bordered">
    <colgroup>
        <col style="width: 1%;">
        <col style="width: 10%;">
        <col style="width: 60%;">
      </colgroup>
    <thead>
        <tr>
          <th>id</th>
          <th>类型名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {volist name="typeList" id="type_list"}
        <tr class="form-group" id="data_{$type_list.id}">
          <td>{$type_list.id}</td>
          <td>{$type_list.name}</td>
          <td>
            <a href="{:url('goodsTypeEdit')}?id={$type_list.id}" class="btn btn-default">修改</a>
            <a href="javascript:void(0);" onclick="deltype({$type_list.id})"  class="btn btn-default">删除</a>
          </td>
        </tr>
        {/volist}
      </tbody>
  </table>
  <div class="panel-footer text-center">
    {$typeList->render()}
  </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加类型</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="type">商品类型名称</label>
            <input type="text" class="form-control" id="goodsType" placeholder="输入商品类型名称">
          </div>          
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-sm" id="cancel" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary btn-sm" id="addtype">添加</button>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="jsRes"}
<script>
    $('#addtype').click(function(event) {
      /* Act on the event */
      var typeName=$('#goodsType').val();
      $.ajax({
        url: '{:url('goods_type')}',
        type: 'post',
        dataType: 'json',
        data: {'name':typeName,'action':'add'},
      })
      .done(function(r) {
        if(r.code=='200'){
          htmlstr ='';
          htmlstr += '<tr class="form-group">';
          htmlstr += '<td>'+r.id+'</td>';
          htmlstr += '<td>'+typeName+'</td>';
          htmlstr += '<td>';         
          htmlstr += '<a href="" class="btn btn-default">修改</a>';
          htmlstr += '<a href="javascript:void(0);" click="delCategory({$type_list.id})"  class="btn btn-default">删除</a>';
          htmlstr +='</td></tr>';
          $('tbody').prepend(htmlstr);
          $('#cancel').click();
        }
      })
      .fail(function(){
        console.log("error");
      })
    });
    function deltype(id){
      $.ajax({
        url: '{:url('goods_type')}',
        type: 'post',
        dataType: 'json',
        data: {'id':id,'action':'del'},
      })
      .done(function(r) {
        if(r.code=='200'){
          $('#data_'+id).hide();
        }
      })
      .fail(function(){
        console.log("error");
      })
    }
</script>
{/block}